<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- <link rel="icon" href=""> -->
    <title>线索列表</title>
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link rel="stylesheet" href="/homemobile/kehu/css/weui.min.css">
    <link rel="stylesheet" href="/homemobile/kehu/css/base.css">
    <link rel="stylesheet" href="/css/format.css">
    <style>
        body{
          background: #f7f7f7;
        }
        .clueList_search_container{
            background: #fff;
            padding: 0.20rem;
        }
        .clueList_search_content{
            background: #efeef3;
            display: flex;
            justify-content: center;
            align-items: center;
            height: .65rem;
        }
        .clueList_search_content svg{
            width: 0.35rem;
            height: 0.35rem;
        }
        .clueList_search_content span{
            font-size: 0.30rem;
            color: #999;
            padding-left: .05rem;
        }
        .clueList_searchHide_container{
            display: flex;
            align-items: center;
        }
        .clueList_searchHide_content{
            border: 1px solid #ececec;
            display: flex;
            align-items: center;
            flex: 1;
            border-radius: .4rem;
            padding: .1rem .3rem .1rem .2rem;
        }
        .clueList_searchHide_content input{
            outline: none;
            appearance: none;
            flex: 1;
            border: none;
            font-size: .28rem;
            padding-left: .1rem;
        }
        .clueList_searchHide_content svg{
            width: 0.35rem;
            height: 0.35rem;
        }
        .clueList_searchHide_container button{
            margin-left: .2rem;
            border-radius: .4rem;
            color: #fff;
            padding: .1rem .3rem;
            background: #999999;
            outline: none;
            appearance: none;
            border: none;
            font-size: .3rem;
            cursor: pointer;
        }
        .clueList_List_container{

        }
        .clueList_List_container h5{
            font-size: .26rem;
            color: #999;
            font-weight: 400;
            padding: .1rem .3rem;
        }
        .clueList_list_content{
            background: #fff;
            padding: 0 .25rem .2rem .25rem;
        }
        .clueList_list_content li{
            border-bottom: 1px solid #ececec;
            display: flex;
            align-items: center;
            padding: .2rem 0;
        }
        .clueList_listLeft_container{
            flex: 1;
        }
        .clueList_listLeft_container h3{
            font-size: .30rem;
            color: #111;
        }
        .clueList_listStatus_container{
            padding-top: 0.05rem;
            display: flex;
            align-items: center;
        }
        .clueList_listStatus_container span{
            font-size: .28rem;
            color: #777;
        }
        /*.clueList_listStatus_container span:last-child{
            padding-left: .1rem;
            flex:1;
        }*/
        .colorGreen{
            color: #27e836 !important;
        }
        .clueList_listRight_container{

        }
        .clueList_listRight_container svg{
            width: .50rem;
            height: .50rem;
            cursor: pointer;
        }
        .clueList_listRight_container svg:last-child{
            width: .50rem;
            height: .50rem;
            margin-left: .1rem;
        }
        .clueList_list_content button{
            outline: none;
            appearance: none;
            border: none;
            color: #fff;
            margin: .2rem auto 0 auto;
            display: block;
            font-size: 0.3rem;
            border-radius: 20px;
            padding: .1rem .3rem;
            background: #1890ff;
            cursor: pointer;
        }
    </style>
  </head>
  <body>
    <div class="d-flex justify-sb align-items-center page-nav">
      <div class="page-back">
        <a href="javascript:" onClick="javascript:history.go(-1);" ><img src="/homemobile/kehu/img/back.png" alt=""></a>
        <span>线索管理</span>
      </div>
    </div>
    <div class="clueList_search_container">
        <div class="clueList_search_content" >
            <svg t="1608258752426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3157" width="50" height="50"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="3158" fill="#999"></path></svg>
            <span>搜索</span>
        </div>
        <div class="clueList_searchHide_container" style="display: none;">
            <div class="clueList_searchHide_content">
                <svg t="1608258752426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3157" width="50" height="50"><path d="M446.112323 177.545051c137.567677 0.219798 252.612525 104.59798 266.162424 241.493333 13.562828 136.895354-78.778182 261.818182-213.617777 289.008485-134.852525 27.203232-268.386263-52.156768-308.945455-183.608889s25.018182-272.252121 151.738182-325.779394A267.235556 267.235556 0 0 1 446.112323 177.545051m0-62.060607c-182.794343 0-330.989899 148.195556-330.989899 330.989899s148.195556 330.989899 330.989899 330.989899 330.989899-148.195556 330.989899-330.989899-148.195556-330.989899-330.989899-330.989899z m431.321212 793.341415a30.849293 30.849293 0 0 1-21.94101-9.102223l-157.220202-157.220202c-11.752727-12.179394-11.584646-31.534545 0.37495-43.50707 11.972525-11.972525 31.327677-12.140606 43.494141-0.37495l157.220202 157.220202a31.036768 31.036768 0 0 1 6.723232 33.810101 31.004444 31.004444 0 0 1-28.651313 19.174142z m0 0" p-id="3158" fill="#999"></path></svg>
                <input type="text" id="phone" name="phnoe" placeholder="请输入手机号" value="{$phone}">
            </div>
            <button class="search">搜索</button>
        </div>
    </div>
    <div class="clueList_List_container">
        <h5>共{count($clueLists)}个</h5>
        <ul class="clueList_list_content">
            {loop $clueLists as $clue}
            <li>
                <div class="clueList_listLeft_container detail" data-id="{$clue->id}">
                    <div class="clueList_listStatus_container">
                        <span style="max-width: 3.8rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{$clue->remark}</span>
                        <span class="colorGreen" style="padding-left: 0.1rem;">{$type_z[$clue->status]}</span>
                    </div>
                    <div class="clueList_listStatus_container">
                        <span>{$clue->mobile_phone}</span>
                    </div>
                    <div class="clueList_listStatus_container">
                        <!-- <span>张经理</span> -->
                        <span>分配时间：{date("Y-m-d H:i:s",$clue->ctime)}</span>
                    </div>
                </div>
                <div class="clueList_listRight_container">
                    <svg class="callPhone" data-tel="{$clue->mobile_phone}" t="1609812029720" class="icon" viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4537" width="200" height="200"><path d="M371.370667 80.853333c-32.853333 0-60.586667 11.861333-102.314667 38.954667l-11.861333 7.68-10.581334 6.741333c-28.885333 17.92-46.421333 48.170667-54.357333 85.802667-10.922667 51.498667-3.584 118.016 18.944 190.293333 23.338667 74.794667 61.866667 152.576 111.488 225.536a939.008 939.008 0 0 0 110.549333 134.314667c38.4 38.570667 77.824 70.954667 117.333334 96.298667 78.549333 50.389333 153.813333 70.741333 208.853333 41.898666l33.152-19.456c42.282667-25.301333 65.28-46.506667 78.464-78.165333 14.165333-34.090667 9.386667-68.266667-6.656-100.309333-8.661333-17.365333-17.578667-29.482667-30.72-44.928-67.029333-78.592-125.098667-97.621333-188.373333-68.864-6.357333 2.986667-12.288 5.973333-18.005334 9.258666l-17.834666 10.794667a155.221333 155.221333 0 0 1-15.829334-13.952c-20.906667-20.608-46.976-53.248-74.752-93.952-23.594667-34.688-42.538667-66.773333-54.485333-92.074667l-5.12-11.093333-3.584-8.533333a188.458667 188.458667 0 0 1-1.322667-3.328l-1.024-2.816 8.405334-5.205334c40.448-25.514667 61.866667-54.314667 67.541333-89.088 5.930667-36.565333-5.845333-75.989333-32.128-125.568-26.282667-49.322667-59.733333-80.725333-104.746667-88.490666a126.208 126.208 0 0 0-21.034666-1.749334z m0 64c3.413333 0 6.826667 0.256 10.197333 0.853334 21.888 3.754667 41.216 21.888 59.050667 55.381333 20.266667 38.229333 28.586667 66.133333 25.472 85.333333-1.621333 10.069333-6.954667 23.68-32.810667 41.429334l-11.690667 7.552-16 9.813333a38.698667 38.698667 0 0 0-16.981333 25.088l-0.725333 4.437333-0.341334 5.418667c-0.170667 11.989333 3.413333 31.061333 18.986667 63.957333 13.525333 28.586667 34.133333 63.445333 59.477333 100.736 29.866667 43.776 58.453333 79.530667 82.645334 103.466667 13.013333 12.8 24.405333 21.888 34.730666 27.733333 18.944 10.624 33.322667 9.216 43.093334 4.992l4.138666-2.048 22.144-13.781333 9.344-5.418667 9.642667-4.906666 5.674667-2.389334 5.845333-2.048c21.930667-6.613333 49.109333-2.56 95.232 49.194667l8.533333 9.813333 5.205334 6.485334 6.058666 8.192c11.306667 16.469333 22.784 40.106667 13.653334 62.08-6.101333 14.634667-18.389333 26.709333-44.288 42.922666l-35.114667 20.906667c-27.946667 17.322667-84.48 2.986667-147.456-37.461333-35.370667-22.698667-71.210667-52.138667-106.410667-87.466667a875.306667 875.306667 0 0 1-103.082666-125.269333c-46.208-67.882667-81.92-140.032-103.253334-208.554667-19.541333-62.677333-25.813333-118.784-17.493333-158.037333 4.096-19.242667 11.349333-33.28 21.546667-41.728l4.864-3.413334 11.008-7.04 19.285333-12.458666 13.781333-8.277334c19.370667-10.965333 32.981333-15.488 46.08-15.488z" p-id="4538" fill="#1890ff"></path></svg>
                    <svg class="copyNum" data-clipboard-text="{$clue->mobile_phone}" t="1609811920063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="200" height="200"><path d="M1024 624.6c0-149.9-142.3-271.8-317.2-271.8s-317.2 122-317.2 271.8c0 149.9 142.3 271.8 317.2 271.8 30.4 0 60.5-3.7 89.4-10.9 7.9 1.1 30.2 13 43.7 20.2 29.4 15.6 49.6 25.8 65.9 25.8 5.2 0 9.9-1 14.4-3.2 24.9-12.1 15-43.1 5.5-73.1-2.5-8-6.5-20.4-7.8-27.7C985.5 776 1024 702.4 1024 624.6z m-137.5 173c-19.4 14.1-11.1 40.2-1.5 70.5 1.3 4.2 3 9.5 4.5 14.7-9.7-4.4-21.1-10.5-29.4-14.9-29.3-15.6-48.5-25.3-64.3-25.3-3 0-5.8 0.3-8.6 1.1-25.9 6.6-52.9 10-80.3 10-151.3 0-274.3-102.7-274.3-229s123.1-229 274.3-229 274.3 102.7 274.3 229c-0.1 66.3-34.6 129.3-94.7 172.9z" p-id="2561" fill="#1890ff"></path><path d="M379.1 621.5c0-150.7 146.6-273.7 326.7-274.1 6.9 0 13.4-3.4 17.4-9 4-5.7 5-12.9 2.8-19.4-22.4-64.5-69.6-122.4-132.7-163-64.6-41.5-141.5-63.5-222.6-63.5C166.3 92.5 0 234.8 0 409.7c0 91.4 45.7 177.7 125.5 238-1.2 8.5-6.4 25-9.7 35.5-11.2 35.4-21.8 68.9 4.5 81.7 4.8 2.3 9.8 3.4 15.4 3.4 18.3 0 41.7-11.8 76-30 16.8-8.9 44.7-23.7 53.7-24.3 34.1 8.6 69.5 13 105.4 13h1.3c6.9 0 13.5-3.4 17.5-9 4-5.7 5-12.9 2.8-19.5-8.8-25.2-13.3-51-13.3-77z m-42.8 0c0 20.7 2.4 41.3 7 61.5-23.2-1.6-46.1-5.3-68.3-11-19.4-5-44.3 7.5-83.4 28.3-12.1 6.4-29.7 15.8-42.5 21 2.1-8.3 5.3-18.2 7.5-25.3 10.9-34.4 20.3-64-0.4-79-72-52.2-113.3-127.8-113.3-207.3 0-151.3 147.1-274.3 327.9-274.3 133.2 0 253.5 68.8 303.4 170.4-189 14.1-337.9 150.5-337.9 315.7z" p-id="2562" fill="#1890ff"></path><path d="M249.9 305.3m-42.9 0a42.9 42.9 0 1 0 85.8 0 42.9 42.9 0 1 0-85.8 0Z" p-id="2563" fill="#1890ff"></path><path d="M493.9 305.3m-42.9 0a42.9 42.9 0 1 0 85.8 0 42.9 42.9 0 1 0-85.8 0Z" p-id="2564" fill="#1890ff"></path><path d="M614.9 548.2m-34.3 0a34.3 34.3 0 1 0 68.6 0 34.3 34.3 0 1 0-68.6 0Z" p-id="2565" fill="#1890ff"></path><path d="M806.7 548.2m-34.3 0a34.3 34.3 0 1 0 68.6 0 34.3 34.3 0 1 0-68.6 0Z" p-id="2566" fill="#1890ff"></path></svg>
                </div>
            </li>
            {/loop}
            <!-- <button>更多</button> -->
        </ul>
    </div>
    <script src="/cdn/jquery.min.20.js"></script>
    <script src="/cdn/clipboard.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <!-- 复制粘贴 -->
    <script type="text/javascript">
        wx.config({
            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "{$wxConfig['appId']}", // 必填，企业微信的corpID
            timestamp: "{$wxConfig['timestamp']}", // 必填，生成签名的时间戳
            nonceStr: "{$wxConfig['nonceStr']}", // 必填，生成签名的随机串
            signature: "{$wxConfig['signature']}",// 必填，签名，见 附录-JS-SDK使用权限签名算法
            jsApiList: ['navigateToAddCustomer'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
        wx.ready(function(){
            wx.agentConfig({
                corpid: "{$corp_id}", // 必填，企业微信的corpid，必须与当前登录的企业一致
                agentid: "{$agent_id}", // 必填，企业微信的应用id （e.g. 1000247）
                timestamp: "{$agentConfig['timestamp']}", // 必填，生成签名的时间戳
                nonceStr: "{$agentConfig['nonceStr']}", // 必填，生成签名的随机串
                signature: "{$agentConfig['signature']}",// 必填，签名，见附录-JS-SDK使用权限签名算法
                jsApiList: ['navigateToAddCustomer'], //必填
                success: function(res) {
                    console.log('agentConfig success');
                    wx.checkJsApi({
                        jsApiList: ['navigateToAddCustomer'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                        success: function(res) {
                        }
                    });
                },
                fail: function(res) {
                    if(res.errMsg.indexOf('function not exist') > -1){
                        console.log('版本过低请升级')
                    }
                }
            });
        });
        function navigateToAddCustomer(phone){
            wx.invoke('navigateToAddCustomer', 
                 {},
                 function(r) {
             });
        }

        function isQyweixin(){
            //判断当前入口是PC端还是APP端
             let flag = navigator.userAgent.match(
                    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )==null?false:true;
                // return flag?is_weixin()?"来自于APP端企业微信":"":is_weixin()?"来自于PC端的企业微信":"来自于PC端浏览器";
                return flag?is_weixin()?true:false:is_weixin()?false:false;
        }
        function is_weixin(){
             //判断是在企业微信打开 还是 在浏览器打开
             return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
        }
    </script>
    <script>
    	var clipboard = new ClipboardJS('.copyNum');

    	clipboard.on('success', function(e) {
    		alert('复制微信号成功');
            if(!isQyweixin()){
                alert('自动跳转到添加客户页面仅企业微信移动端app可用');
                return;
            }
    		// console.info(e.text);
            navigateToAddCustomer(e.text);
    	});

    	clipboard.on('error', function(e) {
    		console.error('Action:', e.action);
    		console.error('Trigger:', e.trigger);
    	});
    </script>
    <script type="text/javascript">
        $('.clueList_search_content').click(function(){
            $('.clueList_search_content').css('display','none');
            $('.clueList_searchHide_container').css('display','flex');
            $('.clueList_searchHide_content input').focus();
        })
        $(".callPhone").click(function(e){
            console.log(e.currentTarget.dataset.tel)
            window.location.href = 'tel:'+e.currentTarget.dataset.tel;
        })
        $(".search").click(function(){
            // background: #1890ff;
            var phone = $("input[name=phnoe]").val();
            if(phone){
                location.href = "mobile_clue.html?phone="+phone;
            }
            return false;
        })
        $("#phone").bind('input propertychange', function() {
            var phone = $(this).val();
            if(phone){
                $(this).parent().next().css('background', '#1890ff');
            }else{
                $(this).parent().next().css('background', '#999999');
            }
        })
        $(".detail").on('click',function(){
            let id = $(this).data('id');
            location.href = "mobile_clue_detail.html?id="+id;
        })
    </script>
  </body>
</html>
